<template>

  <Card style="position: relative">
    <div slot="title" align="center">
      <Button type="text" size="small" @click="backClick" style="float: left">
        <Icon type="ios-arrow-back" style="margin-right: 5px"></Icon>
        返回
      </Button>

      <h4>评论详情</h4>
    </div>

    <div class="body">
      <Card class="main" v-for="root in dataList" :key="root.main.id">
        <div class="head" slot="title">
          <span v-if="root.main.status==false">昵称: {{root.main.username}}</span>
          <Tag v-else checkable color="blue">站长回复:</Tag>

          <span>邮箱：{{root.main.email}}</span>
          <span>评论时间: {{root.main.createtime}}</span>
          <div style="float: right;margin-right: 10px;">
            <Button type="error" size="small" @click="deleteComment(root.main.id)">删除总评论</Button>
            <Button type="success" size="small" @click="replyEvent(root.main.id)">回复</Button>
            <Button type="info" size="small" @click="updateEvent(root.main.id)">更新</Button>
          </div>
        </div>
        <p style="margin-left: 20px;margin-top: 8px">
          {{root.main.content}}
        </p>

        <div class="reply">
          <Card dis-hover v-for="item in root.reply" :key="item.id" style="margin-top: 5px">
            <div class="head" slot="title">
              <span v-if="item.status==false">昵称: {{item.username}}</span>
              <Tag checkable color="blue" v-else>站长回复:</Tag>
              <span>邮箱：{{item.email}}</span>
              <span>评论时间: {{item.createtime}}</span>
              <div style="float: right;margin-right: 10px;">
                <Button type="info" size="small" @click="updateEvent(item.id)">更新</Button>
                <Button type="error" size="small" @click="deleteComment(item.id)">删除</Button>
              </div>
            </div>
            <p style="margin-left: 20px;margin-top: 8px">
              {{item.content}}
            </p>
          </Card>
        </div>
      </Card>
    </div>

    <div align="center" style="margin: 10px;overflow: hidden">
      <br/>
      <div align="center">
        <Page :page-size="pageConfig.size" :total="pageConfig.total" :current="pageConfig.currentPage"
              @on-change="changePage"></Page>
      </div>
    </div>
    <Spin size="large" fix v-if="spinShow"></Spin>

    <Modal
      v-model="showInput"
      @on-ok="inputOkSelect">
      <Input v-model="inputText" type="textarea" :autosize="true" :placeholder="tip"/>
    </Modal>
  </Card>
</template>

<script>
  export default {
    name: "CommentList",
    data() {
      return {
        id: -1,
        spinShow: false,
        showInput: false,
        type: -1,
        params: '',
        tip: '',
        inputText: '',
        dataList: [],
        pageConfig: {
          size: 6,
          total: 0,
          currentPage: 1
        }
      }
    },
    created() {
      this.id = this.$route.params.id;
      this.request(1);
    },
    methods: {
      backClick() {
        this.$router.push({name: 'CommentManage'})
      },
      changePage(page) {
        this.request(page);
      },
      request(page) {
        this.spinShow = true;
        this.dataList.length = 0;
        this.http.get('/get-comment-detail', {
          id: this.id,
          isSplit: true,
          size: this.pageConfig.size,
          page: page
        }, data => {
          let list = data.list;
          this.pageConfig.total = data.total;
          this.pageConfig.currentPage = data.pageNum;
          this.dataList = list;
        }, error => {
          this.$Message.error(error);
        });
        this.spinShow = false;
      },
      deleteComment(id) {
        this.http.get('/del-comment', {
          id: id
        }, succ => {
          this.request(1);
          this.$Message.success("删除成功");
        }, error => {
          this.$Message.error(error);
        });

      },
      updateComment(id, content) {
        this.http.post('/update-comment', {
          id: id,
          content: content
        }, data => {
          this.request(1);
          this.$Message.success("更新成功");
        }, error => {
          this.$Message.error(error);
        })
      },
      replyComment(parentId, content) {
        this.http.post('/reply-comment', {
          parentId: parentId,
          content: content,
          articleId: this.id
        }, data => {
          this.request(1);
          this.$Message.success("回复成功");
        }, error => {
          this.$Message.error(error);
        })
      },
      inputOkSelect() {
        if (this.inputText.length == 0) {
          this.$Message.warning("输入不能为空");
        } else {
          this.showInput = false;
          if (this.type == 1) {
            this.updateComment(this.params, this.inputText)
          } else if (this.type == 2) {
            this.replyComment(this.params, this.inputText)
          }
          //重置
          this.type = -1;
          this.params = '';
          this.inputText = '';
        }
      },
      updateEvent(id) {
        this.type = 1;
        this.params = id;
        this.tip = '输入更新内容';
        this.showInput = true;
      },
      replyEvent(id) {
        this.type = 2;
        this.params = id;
        this.tip = '输入回复内容';
        this.showInput = true;
      }
    }
  }
</script>


<style lang="stylus" scoped>
  .body
    margin: 10px
    .main
      background: #f8f8f9
      margin-bottom: 30px
      .head
        span
          margin-right: 20px
      .reply
        margin-left: 30px
        margin-top: 10px
</style>
